<template>
	<view>
		<view class="walltes">
			<view>{{wallte}}</view>
			<button @tap="copy()">点击复制</button>
		</view>
		<view class="form-group">
			<view class="form-item">
				<label>账户类型</label>
				<view class="cion-type">
					<text :class="key == type_index ? 'cion-type-active' : ''" v-for="(item,key) in types" @click="type_index = key">{{item}}</text>
				</view>
			</view>
			<view class="form-item">
				<label>金额</label>
				<input type="number" placeholder="请输入充值金额" v-model="form.price"/>
			</view>
			<view  class="form-item">
				<label>凭证</label>
				<view @tap="upload()">
					<view class="up-img-no" v-if="!form.img">
						<i class="icon">&#xe60e;</i>
						<view>点击上传凭证</view>
					</view>
					<image :src="form.img" v-else class="up-img" mode="widthFix"></image>
				</view>
			</view>
			<view  class="form-item">
				<button @tap="submit()">立即充值</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				form :{
					price : '',
					img : ''
				},
				wallte : '',
				types:['种子币','ZSDT'],
				type_index : 0
			}
		},
		onLoad(e) {
			this.getData();
		},
		methods:{
			getData(){
				this.ajax('user/chongzhi',{
					data:{},
					success:(res) => {
						res = res.data;
						this.wallte = res.info;
					}
				});
			},
			upload(){
				uni.chooseImage({
					count : 1,
					success:(res) => {
						var size = res.tempFiles[0].size / 1024 /1024;
						if(size > 5) return this.toasts('图片不能大于5M');
						var file = res.tempFiles[0].path;
						var reader = new plus.io.FileReader();  
						reader.onloadend = (e) => {  
							  this.form.img = e.target.result;
						};  
						reader.readAsDataURL(file);
					}
				})
			},
			copy(){
				uni.setClipboardData({
					data: this.wallte,
					success: () =>{
						this.toasts('复制成功');
					}
				});
			},
			submit(){
				this.ajax('user/chongzhido',{
					data:{
						price: this.form.price,
						pic : this.form.img,
						type : this.type_index
					},
					success:(res) => {
						res = res.data;
						this.toasts(res.info);
						console.log(JSON.stringify(res));
						if(res.status) {
							this.form = {
								img : '',
								price : ''
							};
						}
					}
				})
			}
		}
	}
</script>

<style>
	page {background-color: #FFFFFF;}
	.walltes{width: 100%;height:200upx;background: #409EFF;color:#FFFFFF;}
	.walltes view{text-align: center;}
	.walltes button{width: 210upx;display: block;margin:auto;height:60upx;font-size: 25upx;margin-top:30upx}
	.form-group{width: calc(100% - 40upx);padding:20upx;background: #FFFFFF;overflow: hidden;}
	.form-item{margin-bottom: 20upx;}
	.form-item label{margin:20upx 0;}
	.form-item input{border: 1upx solid #ccc;border-radius: 10upx;background: #FFFFFF;height:80upx;margin-top: 10upx;padding-left: 20upx;font-size: 30upx;}
	.up-img-no{height:250upx;border-radius: 10upx;border:1upx dashed #CCCCCC;margin-top: 20upx;text-align: center;font-size: 35upx;padding-top:100upx}
	.up-img-no .icon{font-size: 60upx;}
	.form-item button{height:80upx;line-height: 80upx;background: #409EFF;color:#FFFFFF;border:none}
	.up-img{margin-top: 40upx;border-radius: 10upx;display: block;margin:auto;}
	.cion-type text{padding:3upx 20upx; border:1px solid #409EFF;border-radius: 5upx;font-size: 25upx;margin-right: 20upx;}
	.cion-type-active{background: #409EFF;color:#FFFFFF}
</style>
